import { defineComponent } from 'vue';
import { getProdStatus, productCaseList } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import "../../../style/index.less";
import {
  ElDatePicker,
  ElDialog,
  ElPagination,
  ElTable,
  ElTableColumn
} from 'element-plus';

export default defineComponent({
  name: 'Product',
  setup() {
    const dialogVisible = ref(false);
    const tableData = ref([]);
    const pageable = ref({
      page: 1,
      pageSize: 15,
      dateTime: new Date(),
      total: 0
    }) as AnyObject;
    const option = ref({
      tooltip: {
        trigger: 'axis',
      
        // formatter: '{b0}: {c0}<br />{b1}: {c1}'
        axisPointer: {
          type: 'shadow',
         
        }
      },
      title: {
        text: '本周产量计划达成',
        subtext: '223',
        textStyle: { fontSize: 14, fontWeight: 'normal', color: '#666' },
        subtextStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#000',
          lineHeight: 50
        },
        right: '15%',
        top: '25%'
      },
      
      color: ['#4a74ea', '#eb7b3b'],
      legend: {
        orient: 'vertical',
        left: '56%',
        top: '65%',
        itemWidth:10,
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      grid: {
        left: '0%',
        right: '50%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisTick: {
            alignWithLabel: true
          },
          splitNumber:4,
          axisLabel: {
            formatter: (name: number) => name / 1000 + 'k'
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          data:["本周产量计划"],
          show: false
        }
      ],
      series: [
        {
          name: '计划数',
          type: 'bar',
          barWidth: '15%',
          data: []
        },
        {
          name: '完工数',
          type: 'bar',
          barWidth: '15%',
          data: []
        }
      ]
    }) as any;
    const option2 = ref({
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '本周品质合格率',
        subtext: '',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#666',
          lineHeight: 40
        },
        subtextStyle: { fontSize: 24, fontWeight: 'bold', color: '#000' },
        left: '40%',
        top: '20%'
      },
      color: ['#4a74ea', '#eb7b3b'],
      legend: {
        orient: 'vertical',
        left: '40%',
        y: '65%',
        icon: 'circle',
        itemWidth: 10,
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      series: [
        {
          name: '本周产品品质',
          type: 'pie',
          radius: ['30%', '50%'],
          avoidLabelOverlap: false,
          center: ['20%', '50%'],
          itemStyle: {
            borderRadius: 2
          },
          label: {
            show: false
          },

          labelLine: {
            show: true,
            length: 5
          },

          data: []
        }
      ]
    }) as any;
    getProdStatus().then((res: AnyObject) => {
      option2.value.series[0].data = [
        { value: res.data.pass_number, name: '合格数' },
        { value: res.data.bad_number, name: '不良数' }
      ];
      option2.value.title.subtext = res.data.pass_rate;
      option.value.title.subtext = res.data.production_plan;
      option.value.series[0].data = [res.data.plain_number];
      option.value.series[1].data = [res.data.finish_number];
      option.value.legend.formatter = (name: string) => {        
        return (
          name +
          ('{a|' +
            (name === '计划数'
              ? res.data.plain_number
              : res.data.finish_number) +
            '}')
        );
      };
      option2.value.legend.formatter = (name: string) => {
        return (
          name +
          ('{a|' +
            (name === '合格数'
              ? res.data.pass_number
              : res.data.bad_number) +
            '}')
        );
      };
    });

    const viewDetail = () => {
      dialogVisible.value = true;
      getProductCase();
    };
    const handleSizeChange = (pageSize: number) => {
      pageable.value.pageSize = pageSize;
      getProductCase();
    };
    const handleCurrentChange = (page: number) => {
      pageable.value.page = page;
      getProductCase();
    };
    const selectMonth = (date: Date) => {
      pageable.value.dateTime = date;
      getProductCase();
    };
    function getProductCase() {
      const month = ('' + (pageable.value.dateTime.getMonth() + 1)).padStart(
        2,
        '0'
      );
      const year = pageable.value.dateTime.getFullYear();
      productCaseList({
        page: pageable.value.page,
        pageSize: pageable.value.pageSize,
        dateTime: year + '-' + month
      }).then((res) => {
        tableData.value = res.data.list;
        pageable.value.total = res.data.total;
      });
    }

    return () => (
      <SheltV2 title="生产状态" more="查看详情" onViewDetail={viewDetail} question='<div><p>【该数据每日02:00更新一次】</p><p>生产状态数据同步MES系统的数据，获取展示本月产量计划达成和本周品质合格率</p></div>'>
        <div class="flex-between">
          <Echarts option={option.value} />
          <Echarts option={option2.value} />
        </div>
        <ElDialog lock-scroll draggable v-model={dialogVisible.value} title="生产情况" style={{maxWidth:"800px",with:"auto"}}>
          <ElDatePicker
            v-model={pageable.value.dateTime}
            type="month"
            class="month_selector"
            range-separator="-"
            clearable={false}
            // @ts-ignore
            onChange={selectMonth}
          />
          <ElTable header-row-class-name="table_header" size="small" data={tableData.value}>
            <ElTableColumn prop="date" label="日期"/>
            <ElTableColumn prop="plain_number" label="计划数"  />
            <ElTableColumn prop="finish_number" label="完工数"  />
            <ElTableColumn prop="production_plan" label="周产量计划达成" />
            <ElTableColumn prop="pass_number" label="合格数"  />
            <ElTableColumn prop="bad_number" label="不良数"  />
            <ElTableColumn prop="pass_rate" label="周品质合格率" width="94" />
          </ElTable>
          <ElPagination
            v-model:current-page={pageable.value.page}
            v-model:page-size={pageable.value.pageSize}
            small
            page-sizes={[15, 30, 50, 100]}
            hide-on-single-page
            layout="total, sizes, prev, pager, next, jumper"
            total={pageable.value.total}
            onSize-change={handleSizeChange}
            onCurrent-change={handleCurrentChange}
          ></ElPagination>
        </ElDialog>
      </SheltV2>
    );
  }
});
